<template>
  <el-col :span="24" style="height: 6vh">
    <el-avatar fit="fill" :src="avatarUrl" style="float: right; margin: 1vh 1vw;
    width: 5vh;height: 5vh;line-height: 5vh"></el-avatar>
    <el-dropdown style="float: right" trigger="click" @command="handleCommand">
      <i class="el-icon-s-tools"
         style="font-size: 4vh;color: #c4bfbf; padding: 2vh 0; cursor: pointer"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="a">个人中心</el-dropdown-item>
        <el-dropdown-item command="b">退出系统</el-dropdown-item>
        <!--        <el-dropdown-item>螺蛳粉</el-dropdown-item>-->
      </el-dropdown-menu>
    </el-dropdown>

    <p style="float:right; padding-right: 1vw;color: #c4bfbf; font-size: 2.2vh">欢迎，{{ userName }}</p>
    <el-button
        style="float:right;margin-top: 2vh;margin-right: 2vw"
        size="small"
        @click="toAdmin"
        v-show="stated==='true'"
        type="success">进入管理系统
    </el-button>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 2vh 0 1vw 1vw">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">情感分析</el-breadcrumb-item>
      <!--      <el-breadcrumb-item>活动列表</el-breadcrumb-item>-->
    </el-breadcrumb>
  </el-col>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Header",
  data() {
    return {
      avatarUrl: '',
      userName: sessionStorage.getItem('user_name'),
      stated: sessionStorage.getItem('stated')
    }
  },
  mounted: function () {
    let filters = {};
    filters.uid = sessionStorage.getItem('user_id');
    this.$axios.get(`${this.$settings.HOST}/user/avatar/storage/`, {
      params: filters,
    }).then(response => {
      this.avatarUrl = response.data[0]['avatar'];
    }).catch(error => {
      this.$message.error('获取图片信息失败');
      console.log(error.response.data);
    });
  },
  methods: {
    toAdmin() {
      window.open('http://127.0.0.1:8000/admin', '_blank')
    },
    handleCommand(command) {
      if (command === 'a') {
        this.$router.push('/user');
      } else if (command === 'b') {
        this.logout();
      }
    },
    logout() {
      this.$confirm('是否退出系统?', '疫情舆论分析系统', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sessionStorage.removeItem('user_id');
        sessionStorage.removeItem('user_name');
        sessionStorage.removeItem('user_token');
        this.$router.push('/');
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });
      });
    },
  }
}
</script>

<style scoped>
.el-breadcrumb {
  font-size: 2.2vh;
}

>>> .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #c4bfbf;
}

.el-dropdown-menu {
  background-color: rgba(48, 78, 108, 0.51);
  border: #304E6C82;
}

.el-dropdown-menu__item {
  color: white;
}
</style>